<template>
  <div>
    <ul class="item">
      <li v-for="(item ,index) of list" v-bind:key="index">{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Index',
  data: function () {
    return {
      list: []
    }
  },
  methods: {
    listhandle: function () {
      axios.get('http://www.laravel.com/api/v1/articles', {
        params: {
          id: 1
        },
        headers: {
          'Authorization': 'Bearer ' + 'eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjZhZmJiNzNhZTUyZTczMzJiNTE1OWJkZjliMmZlNWVjNjAzY2ZiNWExZjY0ZTlmMmRkZGMyM2FkN2QwMDc4MjExNjhiMTQ3ODUwYzhhZjhkIn0.eyJhdWQiOiIxIiwianRpIjoiNmFmYmI3M2FlNTJlNzMzMmI1MTU5YmRmOWIyZmU1ZWM2MDNjZmI1YTFmNjRlOWYyZGRkYzIzYWQ3ZDAwNzgyMTE2OGIxNDc4NTBjOGFmOGQiLCJpYXQiOjE1MzUwNzQzODUsIm5iZiI6MTUzNTA3NDM4NSwiZXhwIjoxNTY2NjEwMzg1LCJzdWIiOiIyOSIsInNjb3BlcyI6W119.HboOWdUZD-Ga-POheXXJMRblpuAOTJy4xHo_sb2Ljpbuwzay4BofiAPwF2_rJlMk005n_PlZIlUXy_cXTfBcdVQxP5DtZO0eo_gE8VWP2kXskwlvsfC26BcHFAdKWiUorfT50XPmLbdwWZO637lNOFT8Ux4fV1ArQyCGfsRlO6X1v22oafeEafiCF3jSZ1ZSCgbBpcL_DttAw1LgXM8PMJ_ld9GyvZA60HpHVoSloRrU4nTfXlr6g09Qmw880ziU3NJnbhMG06ZdvvMHEi8_CD-oPIfUyuSyY1qfhKRZnUeV-KAB42v2IbpoOUawcgd2y_KtFdiyu2ljg4uC5jbyM74jvVowU-qzh736vvDtxiuJYSR1td6LF0mf46fZ5kp_EwpTmbT0b4zkD9mMu8ZQQF-9MGzI1jFFTtCb03mfQ2u2Wgr_Rz_8WWxV-WOlTp_VdRBCQ-cBS7C8xaoW8xzXXU-xrw_4rX0lgvQ9pacd5zQ4OzK9HYo9i5gRO_mZsfH_COAwiyPu3k7Z4S8fjX4PypWwKiLv_BvR848zYVyzo1J0M75WwRzQiiC3y1MbwgeATabLX5vhve6oHt7biEZMbzTwFilcHFsYMIbPubMTUU8OSyouXnsdLAIfQ-ihrwliwJErj3PWKdSbGq2bLSx2VDddnArLFEdRhS--y4cLlK8'
        }
      }).then(this.succHandle)
    },
    succHandle (res) {
      if (res.data.code && res.data.data.length > 0) {
        const result = res.data.data
        console.log(result)
        this.list = result
      }
    }
  },
  mounted () {
    this.listhandle()
  }
}

</script>

<style scoped>
.item {
  height: auto;
}

.item >li {
  border-bottom: 2px;
  height: 20px;
}

</style>
